<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog.list.css">
</head>
<body>
<!-- 这是导航栏 -->
<div class="nav">
    <img src="image/头像.jpg" alt="">
    <span>我的博客系统</span>
    <!-- 空白元素, 用来占位置 -->
    <div class="spacer"></div>
    <a href="blog_list.html">主页</a>
    <a href="blog_edit.html">写博客</a>
    <a href="logout">注销</a>
</div>
<!-- 这里的 .container 作为页面的版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="left">
        <!-- 表示整个用户信息区域. -->
        <div class="card">
            <img src="image/rose.jpg" alt="">
            <h3></h3>
            <a href="#">github 地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情  -->
    <div class="right">
         <!-- .blog 就对应一个博客
        <div class="blog">
             博客标题 
            <div class="title">
                我的第一篇博客
            </div>
             博客发布时间 
            <div class="date">
                2022-05-05 20:52:00
            </div>
             博客的摘要
            <div class="desc">
                从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate maiores.
            <a href="#">查看全文 &gt;&gt; </a>
        </div>
    </div> -->
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    function getBlogList(){
        $.ajax({
            type:'get',
            url: 'blog',
            success:function(body){
                //1. 先把.right里面原有的内容清空
                let rightDiv=document.querySelector('.right');
                rightDiv.innerHTML='';
                //2. 遍历body构造出一个个的blogDiv
                for(let blog of body){
                    let blogDiv=document.createElement('div');
                    blogDiv.className='blog';
                    //3. 构造标题
                    let titleDiv=document.createElement('div');
                    titleDiv.className='title';
                    titleDiv.innerHTML=blog.title;
                    blogDiv.appendChild(titleDiv);
                    //4. 构造发布时间
                    let dateDiv=document.createElement('div');
                    dateDiv.className='date';
                    dateDiv.innerHTML=blog.postTime;
                    blogDiv.appendChild(dateDiv);
                    //5. 构造博客摘要
                    let descDiv=document.createElement('div');
                    descDiv.className='desc';
                    descDiv.innerHTML=blog.content;
                    blogDiv.appendChild(descDiv);
                    //6. 构造查看全文
                    let a=document.createElement('a');
                    a.innerHTML='查看全文 &gt;&gt;';
                    a.href='blog_detail.html?blogId='+blog.blogId;
                    blogDiv.appendChild(a);
                    rightDiv.appendChild(blogDiv);
                }
            },
            error: function(){
                alert('获取博客列表失败');
            }
        });
    }
    getBlogList();

</script>
<script src="js/common.js"></script>
<script>
    //针对博客列表页,调用的时候传入的参数
    getUserInfo('blog_list.html');
</script>
</body>
</html>